<template>
	<view >
		<image src="/static/img/news/bg.png" class="w-max pa top0 left0" mode="widthFix"></image>
		<navbar :backgroundColor="background" :scrollTop="scrollTop" :titleColor="titleColor">
			<view class="px20 flex w-max color-666 fs26" >
				<view class="flex1"></view>
				<view class="flex1 text-center fw-w fs32">消息</view>
				<view class="flex1 text-right" @click="clearShow=true">全部清除</view>
			</view>
		</navbar>
		<view class="p20 pr">
			<view v-for="(item,index) in msgList" :key="index">
				<view class="flex pb28 pt28" @click="$u.route('/pages/news/systemMessage')">
					<view class="pr w84 h84">
						<u-avatar :src="item.icon" size="84" />
						<u-badge size="mini" :count="item.count" type="error" is-center />
					</view>
					<view class="w-max h84 ml20 flex-col row-between ov-h">
						<view class="flex">
							<view class="flex1 u-line-1 fs30">{{item.title}}</view>
							<view class="fs24 color-666">{{item.time}}</view>
						</view>
						<view class="u-line-1 fs24 color-999">{{item.content||'暂时没有新的消息哦~'}}</view>
					</view>
				</view>
				<view class="ml104 h2 bg-f5f"></view>
			</view>
			<!-- ?to_id=8&to_identify=master -->
			<view class="">
				<block v-for="(item,index) in list" :key="index">
					<view class="flex pb28 pt28" @click="$goChat({to_id:item.to_id,to_identify:item.to_identify})">
						<view class="pr w84 h84">
							<u-avatar :src="item.avatar||''" size="84" />
							<u-badge size="mini" :count="item.count" type="error" is-center />
						</view>
						<view class="w-max h84 ml20 flex-col row-between ov-h">
							<view class="flex">
								<view class="flex1 u-line-1 fs30">{{item.name}}</view>
								<view class="fs24 color-666">{{item.create_time}}</view>
							</view>
							<view class="u-line-1 fs24 color-999">{{item.content||'暂时没有新的消息哦~'}}</view>
						</view>
					</view>
					<view class="ml104 h2 bg-f5f"></view>
				</block>
			</view>
		</view>


		<u-popup v-model="clearShow" width="550" mode="center" borderRadius="20">
			<view class="px60 pb40 pt88 flex-col col-center">
				<view class="fs32 fw-w">确定清除所有未读消息吗？</view>
				<view class="w-max mt60 flex row-between">
					<view class="w200">
						<u-button type="warning" @click="clear">确定</u-button>
					</view>
					<view class="w200">
						<u-button type="warning" plain @click="clearShow=false">取消</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<tabbar></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				background: {
					backgroundImage: 'linear-gradient(91deg, #00C2CF 0%, #1ED2BE 100%)',
				},
				titleColor: '#00111D',


				clearShow: false,
				list: [],

				data: ""
			};
		},
		computed: {
			msgList() {
				let message = this.data?.message || ""
				let aa = [{
						icon: '/static/img/news/system.png',
						title: '系统消息',
						content: message?.title || '',
						count: message?.unread || 0,
						time: '12:37',
						nav: '/pages/my/msg/system'
					}
					// , {
					// 	icon: '/static/img/news/service.png',
					// 	title: '客服',
					// 	content: '请稍等，正在为您咨询...',
					// 	count: 1,
					// 	time: '12:36',
					// 	nav: ''
					// }
				]
				return aa
			}
		},
		onLoad() {
			uni.$off('$onChat', this.onSend);
			uni.$on('$onChat', this.onSend);
		},
		onUnload() {
			uni.$off('$onChat', this.onSend);
		},
		onShow() {
			this.get_message()
			this.chatList()
		},
		methods: {
			onSend() {
				let index = ''
				if (msg.form.id == this.$user.id) { //我发的消息
					index = this.list.findIndex(e => e.user_id == msg.to_id)
				} else if (msg.to_id == this.$user.id) { //发给我的消息
					index = this.list.findIndex(e => e.user_id == msg.form.id)
					if (index != -1) this.list[index].count++
				}
				if (index != -1) { //列表有消息
					this.list[index].content = msg.message.content.text
					this.list[index].createtime = msg.createtime
					this.list.unshift(this.list.splice(index, 1)[0])
				} else { //列表中没有此人的消息
					this.getList()
				}
			},
			get_message() {
				this.$request("/member/message/index").then(res => {
					this.data = res.data
					// this.list=res.data?.chat||[]
				})
			},
			chatList() {
				this.$request("/member/message/chatList").then(res => {
					this.list = res.data
				})
			},
			clear() {
				this.$request("/member/message/clear").then(res => {
					// this.data = res.data
					this.get_message()
					this.clearShow = false
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

</style>
